<template>
  <div>
    <el-button type="primary" @click="outerVisible = true">增加数据</el-button>
    <!-- 表格组件 -->
    <TableList
      :currentPage1="currentPage1"
      :pageList="pageList"
      :pageSize="size"
      :total="total"
      @editClick="handleEdit"
      @deleteClick="handleDelete"
      @currentClick="handleCurrentChange"
      @sizeChangeClick="handleSizeChange"
    ></TableList>
    <!-- 弹出框组件 -->
    <DialogCom
      :innerVisible="innerVisible"
      :outerVisible="outerVisible"
      :title="title"
      :formLabelWidth="formLabelWidth"
      :form="form"
      @innerClose="innerClose"
      @innerSure="innerSure"
      @outerClose="outerClose"
      @outerSure="innerVisible = true"
    ></DialogCom>
  </div>
</template>
<script>
import TableList from "@/components/TableList.vue";
import DialogCom from "@/components/Dialog";
import moment from "moment";
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
import { addPageData, deleteItem, updateItem } from "@/api/index";
import { getTimer } from "@/utils/index";
export default {
  components: {
    TableList,
    DialogCom
  },
  data() {
    return {
      title: "添加数据",
      currentPage1: 1,
      size: 5,
      outerVisible: false,
      innerVisible: false,
      form: {
        username: "",
        age: 0,
        gender: "1",
        birth: "",
        address: ""
      },
      formCopy: {}, // 拷贝数据应付修改
      formLabelWidth: "120px"
    };
  },
  computed: {
    ...mapState(["tableData", "pageList", "total"]),
    ...mapGetters([""])
  },
  created() {},
  mounted() {
    this.getInitData();
    this.getPageData({ page: 0, size: this.size });
  },
  methods: {
    ...mapActions(["getInitData", "getPageData"]),
    // 弹出框内部确定事件
    async innerSure() {
      // 增加数据 （增加接口） 修改数据（修改接口）
      this.innerVisible = false;
      this.outerVisible = false;
      // 变更时间格式
      this.form.birth = getTimer(this.form.birth);
      switch (this.title) {
        case "编辑数据":
          const data = await updateItem(this.form);
          this.getListForPage(data);
          break;
        case "添加数据":
          const pageData = await addPageData({ ...this.form });
          this.getListForPage(pageData);
          break;
        default:
          console.log("ddd");
      }
    },
    innerClose() {
      this.innerVisible = false;
    },
    outerClose() {
      // 点击弹出框外层取消按钮的时候，把原始数据赋值给form对象，
      this.outerVisible = false;
      this.getPageData({ page: this.currentPage1 - 1, size: this.size });
    },
    handleChange(value) {},
    // size变更
    handleSizeChange(size) {
      //基于用户选中每页展示数量的多少去更新size
      this.size = size;
      // 更改size之后从新请求数据
      this.getPageData({ page: 0, size: this.size });
    },
    // 当前页码变更
    handleCurrentChange(val) {
      let page = val - 1;
      this.currentPage1 = val;
      this.getPageData({ page, size: this.size });
    },
    // 编辑
    handleEdit({ index, row }) {
      // this.formCopy = JSON.parse(JSON.stringify(row));
      // 调出弹出框
      this.outerVisible = true;
      this.title = "编辑数据";
      // this.form = row;
    },
    // 删除item
    async handleDelete({ index, row }) {
      // 请求删除接口
      const data = await deleteItem({ id: row.id });
      // 判断删除成功，重新调用请求分页数据，注意，页码一定要注意
      this.getListForPage(data);
    },
    // 获取分页数据函数封装
    getListForPage(data) {
      if (data.code === 0) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.getPageData({ page: this.currentPage1 - 1, size: this.size });
      } else {
        this.$message.error(data.msg);
      }
    }
  }
};
</script>

<style>
</style>